<template>
  <div class="ticket-container">
    <h3 class="ticket-recommend border-bottom">去哪儿推荐</h3>
    <div class="ticket-box border-bottom">
      <div class="ticket-left">
        <h6 class="ticket-title">李小龙乐园成人大门票</h6>
        <ul class="ticket-float">
          <li class="ticket-sale">赠券<span class="yuan">&yen;</span><em class="num">10.0</em></li>
        </ul>
        <ul class="ticket-float">
          <li class="ticket-book-status"><span class="iconfont timer">&#xe625;</span>可订明日</li>
          <li class="ticket-return"><span class="iconfont timer">&#xe625;</span>条件退</li>
        </ul>
      </div>
      <div class="ticket-right border-left">
        <strong class="ticket-price">&yen;<em class="ticket-price-num">42.0</em></strong>
        <em class="ticket-booking">预定</em>
      </div>
    </div>
    <div class="ticket-box border-bottom">
      <div class="ticket-left">
        <h6 class="ticket-title">李小龙乐园儿童/学生/长者大门票</h6>
        <ul class="ticket-float">
          <li class="ticket-sale">赠券<span class="yuan">&yen;</span><em class="num">1.0</em></li>
        </ul>
        <ul class="ticket-float">
          <li class="ticket-book-status"><span class="iconfont timer">&#xe625;</span>16:30前可订今日</li>
          <li class="ticket-return"><span class="iconfont timer">&#xe625;</span>条件退</li>
        </ul>
      </div>
      <div class="ticket-right border-left">
        <strong class="ticket-price">&yen;<em class="ticket-price-num">35</em></strong>
        <em class="ticket-booking">预定</em>
      </div>
    </div>
    <div class="ticket-box border-bottom">
      <div class="ticket-left">
        <h6 class="ticket-title">李小龙乐园1大1小亲子大门票</h6>
        <ul class="ticket-float">
          <li class="ticket-sale">赠券<span class="yuan">&yen;</span><em class="num">2.0</em></li>
        </ul>
        <ul class="ticket-float">
          <li class="ticket-book-status"><span class="iconfont timer">&#xe625;</span>16:30前可订今日</li>
          <li class="ticket-return"><span class="iconfont timer">&#xe625;</span>条件退</li>
        </ul>
      </div>
      <div class="ticket-right border-left">
        <strong class="ticket-price">&yen;<em class="ticket-price-num">75</em></strong>
        <em class="ticket-booking">预定</em>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'DetailTicket'
}
</script>

<style lang="stylus" scoped>
  .ticket-container
    margin-top .2rem
    padding-left .2rem
    background #fff
    .ticket-recommend
      background url('')
      background-repeat no-repeat
      background-size .36rem .36rem
      background-position 0 center
      text-indent .36rem
      line-height .88rem
      font-size .32rem
      padding 0 .2rem
      color #333
    .ticket-box
      display flex
      padding .2rem .2rem .24rem 0
      .ticket-left
        flex 2.91
        .ticket-title
          margin-right .1rem
          line-height .52rem
          padding 0
          font-size .3rem
        .ticket-float
          overflow hidden
          padding: .04rem 0 .08rem 0
          .ticket-sale
            overflow hidden
            text-overflow ellipsis
            white-space nowrap
            font-size .24rem
            color #ff6b62
            float left
            margin .04rem .06rem .04rem 0
            padding .02rem .04rem
            border .02rem solid #ff6b62
            border-radius 2px
            .yuan
              margin-left .04rem
              line-height .24rem
              .num
                font-size .24rem
                line-height .24rem
          .ticket-book-status,
          .ticket-return
            line-height .32rem
            font-size .24rem
            float left
            margin-right .24rem
            color #616161
            .timer
              font-size .24rem
              color #1ba9ba
              margin-right .08rem
      .ticket-right
        flex 1
        text-align center
        .ticket-price
          display block
          height .28rem
          line-height .28rem
          text-align: center
          font-size .24rem
          color #ff9800
          .ticket-price-num
            margin-left .04rem
            font-size: .32rem
            line-height .32rem
        .ticket-booking
          display block
          height .6rem
          line-height .6rem
          color #fff
          background #ff9800
          font-size .28rem
          border-radius .06rem
          margin-left .2rem
</style>
